<template>
  <div class="dashboard-container">
    <h1>个人信息管理</h1>
    <!-- 用户信息表单 -->
    <el-form :rules="roles" label-width="20%" :model="updateList" ref="ruleForm">
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable
                  placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="userPassword">
        <el-input v-model="updateList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable
                  placeholder="请输入用户密码"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="updateList.sex" maxlength="1" show-word-limit style="width: 80%" clearable
                  placeholder="请输入性别"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="updateList.idCard" maxlength="18" show-word-limit style="width: 80%" clearable
                  placeholder="请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable
                  placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="updateList.remark" maxlength="20" show-word-limit style="width: 80%" clearable
                  placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <!-- 操作按钮 -->
    <el-button type="primary" style="margin-left: 40%;width: 80px" @click="update('ruleForm')">保存</el-button>
    <el-button style="margin-left: 40px;width: 80px" @click="checkUser">重置</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectAllUser, updateUser } from '@/api/user'

export default {
  name: 'User',
  computed: {
    // 从Vuex中获取用户相关状态
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      // 用户信息表单数据
      updateList: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        idCard: '',
        phoneNumber: '',
        remark: ''
      },
      // 表单验证规则
      roles: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
        ],
        remark: []
      }
    }
  },
  methods: {
    // 检查用户信息（实际调用selectUser方法）
    checkUser() {
      this.selectUser()
    },
    // 获取用户信息
    selectUser() {
      // 调用API获取用户信息
      selectAllUser({ userId: this.userId, userName: this.userName, roleName: this.roleName }).then(response => {
        console.log(response.data)
        // 将获取到的用户信息赋值给表单
        this.updateList = response.data[0]
      })
    },
    // 提交表单
    update(formName) {
      // 验证表单
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单验证通过，调用API更新用户信息
          updateUser({
            userTableId: this.updateList.userTableId,
            userId: this.updateList.userId,
            roleId: this.updateList.roleId,
            userName: this.updateList.userName,
            userPassword: this.updateList.userPassword,
            sex: this.updateList.sex,
            idCard: this.updateList.idCard,
            phoneNumber: this.updateList.phoneNumber,
            remark: this.updateList.remark
          }).then(response => {
            // 更新成功后重新获取用户信息
            this.selectUser()
            // 显示成功消息
            this.$message({ message: '保存成功', type: 'success' })
            // 刷新用户信息
            this.$store.dispatch('user/getInfo')
          })
        } else {
          return false
        }
      })
    }
  },
  // 组件挂载后获取用户信息
  mounted() {
    this.selectUser()
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
